<!-- StudyCreatPlan_SelectStu_Win.html -->
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
	<head>
		<meta charset="utf-8">
		<meta name="viewport"
		content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
		<link href="../../css/mui.min.css" rel="stylesheet"/>
		<link href="../../css/base.css" rel="stylesheet"/>
		<title>选择班级</title>
		<style>
			li {
				list-style-type: none;
			}
			ul {
				padding-left: 0;
				margin-left: 0;
			}
			/*
			 选择班级父节点
			 */
			#class_parent {
				overflow: hidden;
				margin-left: 10px;
				clear: both;
				padding: 10px 0px;
			}
			/*
			 选择班级子节点
			 */
			#class_child {
				height: 30px;
				line-height: 30px;
				overflow: hidden;
				margin-left: 10px;
			}
			/*
			 打开角标图片 朝向右边
			 */
			#img_right {
				height: 20px;
				width: 20px;
				float: right;
				margin: 0px 10px;
			}
			/*
			 打开角标图片 朝向下边
			 */
			#img_down {
				height: 20px;
				width: 20px;
				float: right;
				margin: 0px 10px;
			}
			/*
			 父节点全选按钮
			 */
			#class_parent .check_all {
				height: 20px;
				width: 20px;
				float: left;
				margin-left: 10px;
			}
			/*
			 子节点单选按钮
			 */
			#class_child img {
				height: 20px;
				width: 20px;
				float: left;
				margin-top: 5px;
				margin-bottom: 5px;
				margin-left: 10px;
			}
			#class_grandson {
				height: 30px;
				line-height: 30px;
				overflow: hidden;
				margin-left: 10px;
			}
			#class_grandson img {
				height: 20px;
				width: 20px;
				float: left;
				margin-top: 5px;
				margin-bottom: 5px;
				margin-left: 10px;
			}
			header label {
				width: 56px;
				height: 44px;
				line-height: 44px;
				text-align: center;
				overflow: hidden;
				color: #FFFFFF;
			}
			.div_divider_two {
				right: 0;
				left: 0;
				height: 10px;
				content: '';
				-webkit-transform: scaleY(.3);
				transform: scaleY(.3);
				background-color: #ededed;
				top: -1px;
			}
		</style>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav base_style_color" style="padding: 22px 0 0;height:66px">
			<label onclick="backClick()"> 取消 </label>
			<h1 class="mui-title" style="color: #FFFFFF">选择人员</h1>
			<label style="float: right" onclick="complete()"> 完成 </label>
		</header>
		<div id="app" style="margin-top: 66px;">
			<div v-if="!network" class="loadFailure">
				<img src="../../image/icon_img01.png" width="60%">
				<p class="">
					数据加载失败
				</p>
				<p>
					请检查您的网络
				</p>
				<button type="button" class="mui-btn mui-btn-outlined" v-on:click="refreshData()">
					重新加载
				</button>
			</div>
			<div v-else>
				<div v-if="class_name.length < 1" class="noSign">
					<img src="../../image/icon_img.png" width="60%">
					<p class="font16 top_15 base_dark_grey">
						暂无数据
					</p>
				</div>
				<div v-else>
					<ul>
						<div v-for="(c , index) in class_name">
							<li  class="base_gary_bg_color" style="background-color:#FFFFFF;">
								<div id="class_parent" v-on:click="itemClick(index)">
									<img v-if="c.check_all" class="check_all" src="../../icon/icon_select.png"
									v-on:click.stop="checkAll(index)">
									<img v-else class="check_all" src="../../icon/icon_unselect.png"
									v-on:click.stop="checkAll(index)">
									<label style="float:left;width: 75%;margin-left: 10px"> {{c.title}} <!--   超级无敌长的班级名字是什超级无敌长的班级名字是什超级无敌长的班级名字是什--> </label>
									<label v-show="c.user.length > 0" style="float: right"> <img v-if="c.state" id="img_down" src="../../icon/icon_select_open_down.png"> <img v-else id="img_right" src="../../icon/icon_select_open_right.png"> </label>
								</div>
								<div class="div_divider"></div>
								<div v-show="c.state">
									<ul>
										<li v-for="(item , i_index) in c.user"style="background-color:#FFFFFF;">
											<div v-if="item.two.length < 1" id="class_child" v-on:click.stop="childClick(index,i_index)" style="margin-left: 20px">
												<label style="margin-left: 20px"> {{item.rename}} </label>
												<img v-if="item.state" src="../../icon/icon_select.png">
												<img v-else="item.state" src="../../icon/icon_unselect.png">
											</div>
											<div v-else   id="class_child"  style="margin-left: 20px">
												<label style="margin-left: 20px"> {{item.title}} </label>
												<label v-show="item.two.length > 0" style="float: right"> <img v-if="item.state" v-on:click.stop="opengrandsonClick(index,i_index)"   id="img_down"    src="../../icon/icon_select_open_down.png"> <img v-else="item.state" id="img_right" v-on:click.stop="opengrandsonClick(index,i_index)"   src="../../icon/icon_select_open_right.png"> </label>
												<img v-if="item.check_all" v-on:click.stop="CheckChildeAll(index,i_index)"  src="../../icon/icon_select.png">
												<img v-else="item.check_all"  v-on:click.stop="CheckChildeAll(index,i_index)" src="../../icon/icon_unselect.png">
											</div>
											<div class="div_divider"></div>
											<div v-show="item.state">
												<ul>
													<li v-for="(two,s_index) in item.two"style="background-color:#FFFFFF;">
														<div id="class_grandson" v-on:click.stop="grandsonClick(index,i_index,s_index)" style="margin-left: 40px">
															<label style="margin-left: 20px"> {{two.rename}} </label>
															<img v-if="two.state" src="../../icon/icon_select.png">
															<img v-else="two.state" src="../../icon/icon_unselect.png">
														</div>
														<div class="div_divider"></div>
													</li>
												</ul>
											</div>
										</li>
									</ul>
								</div>
							</li>
							<div class="interval"></div>
						</div>
					</ul>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="../../script/api.js"></script>
	<script type="text/javascript" src="../../script/vue.js"></script>
	<script type="text/javascript" src="../../script/MD5.js"></script>
	<script type="text/javascript" src="../../script/requestTool.js"></script>
	<script type="text/javascript" src="../../script/jquery.min.js"></script>
	<script type="text/javascript" src="../../script/common.js"></script>
	<script type="text/javascript">
		var selectClass = [];
		var data = [];
		var selectedStuArr = new Array();
		var select = new Array();
		var selectedTeacherArr = new Array();
		var app = new Vue({
			el : '#app',
			data : {
				class_name : data,
				message : 'Hello Vue!',
				network : true
			},
			methods : {
				itemClick : function(index) {//父节点点击事件 ,展开子班级
					data[index].state = !data[index].state;
				},
				childClick : function(index, childClick) {//子班级选择
					data[index].user[childClick].state = !data[index].user[childClick].state;
					var childSelectNum = ReturnSelectNum(data[index].user);
					var ItemSelectNum = data[index].user.length;
					if (ItemSelectNum > childSelectNum) {
						data[index].check_all = false;
					} else if ( ItemSelectNum = childSelectNum) {
						data[index].check_all = true;
					}
				},
				grandsonClick : function(index, childClick, grandsonClick) {//孙班级单项选择
					data[index].user[childClick].two[grandsonClick].state = !data[index].user[childClick].two[grandsonClick].state;
					if (data[index].user[childClick].two.length > 1) {//三层结构
						var childSelectNum = isTrueSelectNum(data[index].user) + isTrueCheckNum(data[index].user);
						var ItemSelect = data[index].user.length;
						if (ItemSelect > childSelectNum) {
							data[index].check_all = false;
						} else if ( ItemSelect = childSelectNum) {
							data[index].check_all = true;
						}
						var grandsonSelectNum = isTrueSelectNum(data[index].user[childClick].two);
						var childSelect = data[index].user[childClick].two.length;
						if (childSelect > grandsonSelectNum) {
							data[index].user[childClick].check_all = false;
							data[index].check_all = false;
						} else if ( grandsonSelectNum = childSelect) {
							data[index].user[childClick].check_all = true;
						}
					}
				},
				checkAll : function(index) {//全选  取消全选
					//点击全选打开子节点
					data[index].state = true;
					//全选 取消全选状态切换
					data[index].check_all = !data[index].check_all;
					for (var i = 0; i < data[index].user.length; i++) {
						if (data[index].user[i].two.length < 1) {
							data[index].user[i].state = data[index].check_all;
						} else {
							data[index].user[i].state = data[index].check_all;
							data[index].user[i].check_all = data[index].check_all;
						}
						for (var k = 0; k < data[index].user[i].two.length; k++) {
							data[index].user[i].two[k].state = data[index].check_all;
						}
					}
				},
				opengrandsonClick : function(index, childClick) {//打开孙页面
					//点击全选打开子节点
					//					data[index].user[childClick].state = true;
					//全选 取消全选状态切换
					data[index].user[childClick].state = !data[index].user[childClick].state;
				},
				CheckChildeAll : function(index, childClick) {//存在第三级，全选
					//点击全选打开子节点
					data[index].user[childClick].state = true;
					var childSelectNum = isTrueSelectNum(data[index].user) + isTrueCheckNum(data[index].user);
					var ItemSelect = data[index].user.length;
					if (ItemSelect > childSelectNum) {
						data[index].check_all = false;
					} else if ( ItemSelect = childSelectNum) {
						data[index].check_all = true;
					}
					//全选 取消全选状态切换
					data[index].user[childClick].check_all = !data[index].user[childClick].check_all;
					for (var k = 0; k < data[index].user[childClick].two.length; k++) {
						data[index].user[childClick].two[k].state = data[index].user[childClick].check_all;
					}
				},
				refreshData : function() {//从新加载数据
					loadDate();
				}
			}
		});
		function backClick() {
			sendBuriedNotifi('1', '添加学习计划小组选择人员页', '219')
			api.closeWin({
			});
		}

		/*
		 * 完成按钮
		 * */
		function complete() {
			select = new Array();
			selectedStuArr = new Array();
			selectedTeacherArr = new Array();
			for (var i = 0; i < data.length; i++) {
				for (var j = 0; j < data[i].user.length; j++) {
					var c = data[i].user[j];
					if (c.two.length > 0) {//存在第三级
						for (var k = 0; k < c.two.length; k++) {
							if (c.two[k].state) {
								select.push({
									blocuid : c.two[k].blocuid,
									uid : c.two[k].uid,
									rename : c.two[k].rename,
									name : c.two[k].rename,
									teamid : api.pageParam.tid
								});
								selectedStuArr.push({
									blocuid : c.two[k].blocuid,
									uid : c.two[k].uid
								});
								selectedTeacherArr.push(c.two[k].blocuid);
							}
						}
					} else {
						if (c.state) {
							select.push({
								blocuid : c.blocuid,
								uid : c.uid,
								rename : c.rename,
								name : c.rename,
								teamid : api.pageParam.tid
							});
							selectedStuArr.push({
								blocuid : c.blocuid,
								uid : c.uid
							});
							selectedTeacherArr.push(c.blocuid);
						}
					}
				}
			}
			//关闭页面
			// api.closeWin();
			if (api.pageParam.type == 1) {//学生
				addStudentToTeam(function() {
					//发送数据
					api.sendEvent({
						name : 'addPlanTeamStuNotifi',
						extra : {
							tid : api.pageParam.tid,
							data : select
						}
					});
					api.closeWin();
				});
			} else if (api.pageParam.type == 2) {//老师
				addTeacherToCourse(function() {
					//发送数据
					api.sendEvent({
						name : 'addPlanCourseTeacherNotifi',
						extra : {
							data : select
						}
					});
					api.closeWin();
				});
			}
		}

		apiready = function() {
			loadDate();
			sendBuriedNotifi('0', '添加学习计划小组选择人员页', '219')
		};
		function sendBuriedNotifi(busionessid, pagetype, pagetypeid) {
			var userinfo = {
				uid : $api.getStorage('cfnetppuid'),
				jid : $api.getStorage('cfnetppjxid'),
				uname : $api.getStorage('cfnetppusername'),
			}
			var data = {
				busionessid : busionessid,
				pagetype : pagetype,
				pagetypeid : pagetypeid,
				sourceurl : api.pageParam.sourceurl,
				sourcetitle : api.pageParam.sourcetitle,
				accesspageurl : window.location.pathname,
				accesspagetitle : document.title,
				userinfo : userinfo
			}
			SendBehaviorTrajectoriesNotifi_Study(data);
		}

		function notNetwork(network) {
			app.network = network;
		}

		function addTeacherToCourse(callback) {
			if (selectedTeacherArr.length == 0) {
				api.toast({
					msg : '请选择指导教师'
				});
				return;
			}
			var blocuids = selectedTeacherArr.join(",");
			var params = {
				jid : $api.getStorage('cfnetppjxid'),
				pid : api.pageParam.pid,
				blocuids : blocuids,
				cid : api.pageParam.cid
			};
			api.showProgress({
				style : 'default',
				animationType : 'fade',
				title : '',
				text : '添加指导教师中...',
				modal : false
			});
			cfnetppPOST(url_planCourseAddTeacher, params, false, function(data, status) {
				api.hideProgress();
				if (status == 'success') {
					if (data.code == 200) {
						api.toast({
							msg : '添加指导教师成功'
						});
						callback();
					} else {
						api.toast({
							msg : '添加指导教师失败'
						});
					}
				} else {
					api.toast({
						msg : '添加指导教师失败'
					});
				}
			});
		}

		function addStudentToTeam(callback) {
			if (selectedStuArr.length == 0) {
				api.toast({
					msg : '请选择小组成员'
				});
				return;
			}
			var params = {
				pid : api.pageParam.pid,
				tid : api.pageParam.tid,
				uid : $api.getStorage('cfnetppuid'),
				jid : $api.getStorage('cfnetppjxid'),
				students : selectedStuArr
			};
			api.showProgress({
				style : 'default',
				animationType : 'fade',
				title : '',
				text : '添加学生中...',
				modal : false
			});
			cfnetppPOST(url_planTeamAddStu, params, false, function(data, status) {
			    SendBusinessOperationsLogNotifi('老师添加学习计划下小组人员', '219', params, params, '', data, '老师添加学习计划下小组人员接口', '219-01');
				api.hideProgress();
				if (status == 'success') {
					if (data.code == 200) {
						api.toast({
							msg : '添加小组成员成功'
						});
						callback();
					} else {
						api.toast({
							msg : '添加小组成员失败'
						});
					}
				} else {
					api.toast({
						msg : '添加小组成员失败'
					});
				}
			});
		}

		/*
		 * 获取班级信息
		 * */
		function loadDate() {
			var jid = $api.getStorage('cfnetppjxid');
			api.showProgress({
				style : 'default',
				animationType : 'fade',
				title : '正在获取人员',
				text : '请稍候...',
				modal : true
			});
			var type = api.pageParam.type;
			if (type == 1) {
				type = 0;
			}
			var params = {
				uid : $api.getStorage('cfnetppuid'),
				jid : $api.getStorage('cfnetppjxid'),
				type : type,
				pid : api.pageParam.pid
			};
			if (api.pageParam.type == 2) {//老师
				params["cid"] = api.pageParam.cid;
			}
			//获取服务器班级列表
			cfnetppPOST(url_StudyPlanGetStaffList, params, false, function(datas, status) {
				api.hideProgress();
				if (status === 'success') {
					notNetwork(true);
					for (var i = 0; i < datas.data.length; i++) {
						//添加两个 控制页面显示的变量
						datas.data[i].check_all = false;
						datas.data[i].state = false;
						//之前选择的数据个数
						var selecCount = 0;
						for (var x = 0; x < datas.data[i].child.length; x++) {
							if (datas.data[i].child[x].two.length > 0) {
								datas.data[i].user.push(datas.data[i].child[x]);
							}
						}
						if (datas.data[i].user.length > 0) {
							for (var j = 0; j < datas.data[i].user.length; j++) {
								//判断是否选中
								datas.data[i].user[j].state = false;
								if (datas.data[i].user[j].hasOwnProperty("two") && datas.data[i].user[j].two) {
									datas.data[i].user[j].check_all = false;
									for (var y = 0; y < datas.data[i].user[j].two.length; y++) {
										datas.data[i].user[j].two[y].state = false;
									}
								} else {
									datas.data[i].user[j].two = [];
								}
							}
							//添加数组
							data.push(datas.data[i]);
						} else {
							//如果没有数组则给一个空
							// datas.data[i].user = [];
						}
					}
				} else {
					notNetwork(false);
					api.toast({
						msg : '网络异常!'
					});
				}
			});
		}
	</script>
</html>